<template>
	<view class="content">
		<c-navBar title="嗨词商学院" showAdd @addClick="addItem" @search="navSearch"></c-navBar>
		<van-sticky :offset-top="44">
			<view class="tabs-container" >
				<v-tabs v-if="tabs.length>0" @change="changeTab" activeColor="rgba(0, 122, 255, 1)" v-model="active" field="category_name"
					:tabs="tabs" bgColor="#f2f2f2">
					<!-- <van-tab :title="tab.label" v-for="tab in tabs" :key="tab.id"></v-tab> -->
				</v-tabs> 
   
			</view>  
 
		</van-sticky>
		<view class="content-bottom-style">
			<c-list class="businessSchool-list" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载"
				@load="Loads">
				<van-empty description="暂无数据" v-if="list.length===0" />
				<view class="businessSchool-item" v-for="(item,index) in list" :key="index">
					<view class="item-img">

						<image class="item-img-url" :src="item.cover_image" mode=""></image>
					</view>
					<view class="item-content">
						<view class="item-content-1">
							<text class="item-name">{{item.article_title}} </text>
							<text class="item-time">[{{item.create_time}}]</text>
						</view>
						<view class="item-content-2">
							{{item.article_synopsis}}
						</view>
						<view class="item-content-3">
							<view class="item-num">
								<text>[{{item.business_article_category.category_name}}]</text>
								<text> [已读{{item.read_num}}]</text>
							</view>
							<view class="item-btn">
								<van-button class="customBtn" color="#4E88E6" size="mini"
									@click="edit(item,index)">编辑</van-button>
								<van-button class="customBtn" color="#D43030" size="mini"
									@click="deleteItem(item,index)">删除</van-button>
							</view>
						</view>
					</view>
				</view>
				<!-- <van-empty description="暂无数据"  /> -->
			</c-list>
		</view>




	</view>
</template>

<script setup>
	import {
		getArticleCategoryList,
		getArticleList,
		delArticle,
	} from "@/apis/businessSchool.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from 'vue';

	const titleStyle = {
		fontSize: '12px'
	}
	const tabs = ref([])
	const items = ref([])
	const pramas = reactive({
		category_id: 0,
		search_data: '',
		page: 1,
		size: 20,
	})
	const listLoading = ref(true)
	const isNoUpdate = ref(false)
	const list = ref([]);
	const error = ref(false);
	const loading = ref(false);
	const total = ref(0) 
	const active = ref(0)


	onLoad(() => {


	})
	onShow(() => {
		getInit()

	})
	const edit = (item, indedx) => {
		uni.navigateTo({
			url: `/pages/businessSchool/businessSchoolEdit?id=${item.article_id}&category_id=${tabs.value[active.value].id}`
		})
	}
	const getTabName = (e) => {
		let str = '全部'

		tabs.value.forEach(el => {
			if (el.id === e) {
				str = el.category_name
			}

		})
		return str
	}
	const addItem = () => {
		//新建学院信息 
		uni.navigateTo({
			url: `/pages/businessSchool/businessSchoolEdit?category_id=${tabs.value[active.value].id}`
		})
	}
	const deleteItem = (item, index) => {
		uni.showModal({
			title: '提示',
			content: '确认删除该条信息吗',
			success: function(res) {
				if (res.confirm) {
					delArticle({
						article_id: item.article_id
					}).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'none',
								title: '删除成功',
								duration: 2000
							});
							pramas.page = 1
							list.value = []
							init()
						}
					})
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const changeTab = (e) => {
		active.value = e

		pramas.page = 1
		list.value = []
		pramas.category_id = tabs.value[active.value].id
		isNoUpdate.value = false
		init()
	}
	const navSearch = (e) => {
		console.log(e)
		pramas.search_data = e;
		pramas.page = 1
		list.value = []
		pramas.category_id = tabs.value[active.value].id
		isNoUpdate.value = false
		init()
	}
	const getInit = async () => {
		let {
			data
		} = await getArticleCategoryList({})
		tabs.value = data
		tabs.value.forEach(el => {
			items.value.push(el.category_name)
		})

		pramas.category_id = pramas.category_id ? pramas.category_id : tabs.value[0].id
		pramas.page = 1
		list.value = []
		isNoUpdate.value = false
		listLoading.value = false
		init()

	}
	const init = async (type) => {
		try {
			if (listLoading.value || isNoUpdate.value) {
				return
			}
			listLoading.value = true;
			if (type) {
				pramas.page = pramas.page + 1
			}

			let {
				data
			} = await getArticleList(pramas)

			if (data && data.data.length > 0) {
				total.value = data.total

				list.value = [...list.value, ...data.data]
			} else {
				isNoUpdate.value = true
			}
			listLoading.value = false;
			// console.log('触底加载')
			console.log(list.value)
		} catch (err) {
			console.log(err)
		}



	}
	const Loads = () => {


		init(1)
		loading.value = false;
		error.value = false;


	}; 
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
	}

	.content-bottom-style {

		width: 100%;
		flex: 1;
		overflow: hidden;
	}

	.tabs-container {
		background: #f2f2f2;
		width: 100vw;
		height: auto;
		margin: 0 3px;
	}



	.businessSchool-item {
		padding: 24rpx;
		display: flex;
		width: 670rpx;
		margin: 0 auto;
		min-height: 213.79rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		margin-top: 24rpx;
		border-radius: 16rpx;
		border: 1.75px solid rgba(226, 226, 226, 1);
	}

	.item-img {
		width: 150rpx;
		height: 150rpx;
		margin-right: 24rpx;
		background: rgba(153, 153, 153, 1);

		.item-img-url {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.item-content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.item-content-1 {
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;

		.item-name {
			max-width: 60%;

			font-size: 26rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			line-height: 36rpx;
		}

		.item-time {
			font-size: 26rpx;
			color: rgba(153, 153, 153, 1);
			line-height: 36rpx;
		}

	}

	.item-content-2 {
		font-size: 24rpx;
		line-height: 32rpx;
		color: rgba(102, 102, 102, 1);
	}

	.item-content-3 {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.item-num {
		color: rgba(153, 153, 153, 1);
		font-size: 28rpx;
		line-height: 32rpx;
	}

	:deep(.segmented-control__item--button) {
		border: none;
	}

	:deep(.tabs-container) {
		background: #fff;
		border-radius: 0;
	}
</style>